<template>
  <div
    class="wrapper"
    @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend"
  >
    <Loading v-if="isLoading" />
    <div v-else>
      <header ref="header" class="header">
        <ul class="left">
          <li
            v-for="(item, index) in books"
            :key="item.id"
            :class="active == index ? 'active' : ''"
            @click="selectNav(index)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="right">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            size="20"
            name="sousuo"
          />
        </div>
      </header>
      <keep-alive>
        <router-view :url="url" :cates="cates" />
      </keep-alive>
    </div>
    <compTabbar></compTabbar>
  </div>
</template>

<script>
import { getMergedCagegory, getcateByCondition } from "@/request/api";
import compTabbar from "@/components/compTabbar";

export default {
  components: {
    compTabbar,
  },
  data() {
    return {
      isLoading: true,
      active: 1,
      //所有频道
      books: [],
      //频道下的分类
      cates: [],
      url: "",
      startY: 0,
      endY: 0,
      navUrls: [
        "/category/male",
        "/category/female",
        "/category/publish",
        "/category/ting",
      ],
    };
  },
  methods: {
    selectNav(index) {
      this.active = index;
      this.cates = this.books[index].cates;
      this.url = this.books[index].cates[0].url;
      if (this.$route.path == this.navUrls[index]) return;
      this.$router.push(this.navUrls[index]);
    },
    touchend(e) {
      this.endY = e.changedTouches[0].clientY;
    },
    touchmove(e) {
      // let move = this.endY - this.startY;
      // if (move > 0) {
      //   this.$refs.header.className = "header";
      // } else {
      //   this.$refs.header.className = "pos";
      // }
    },
    touchstart(e) {
      this.startY = e.changedTouches[0].clientY;
      // console.log(this.startY);
    },
  },

  activated() {
    if (!this.$route.meta.isBack) {
      getMergedCagegory().then((res) => {
        this.isLoading = false;
        if (res) {
          this.books = res;
          let gender = 2;
          this.active = gender - 1;
          this.selectNav(this.active);
        }
      });
    }
    this.$route.meta.isBack = false;
  },
  created() {
    this.$route.meta.isBack = false;
  },
  beforeRouteEnter(to, from, next) {
    if (from.name == "xiangqing") {
      to.meta.isBack = true;
    }
    next();
  },
};
</script>

<style lang="scss" scoped>
.pos {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
}
$h: 40px;
header.header {
  position: relative;
  height: $h;
  line-height: $h;
  display: flex;
  padding: 0 14px;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    justify-content: space-between;
    li {
      padding: 10px;
      color: #777;
      font-size: 18px;
      transition: background-color 0.3s linear;
    }
    li:active {
      background-color: rgba(0, 0, 0, 0.3);
    }
    li.active {
      padding: 10px;
      font-size: 20px;
      color: #000;
    }
  }
}
</style>